<template>
  <poputLayout
    @closeWindow="closeWindow"
    title="利润"
    @search="search"
    :isYear="true"
    :isDept="true"
    :isProject="true"
  >
    <div class="body-conatiner">
      <div class="list">
        <div class="list-header">
          <div class="title">年度</div>
          <div class="unit">单位：万元</div>
        </div>
        <div class="chart" ref="chart1"></div>
      </div>
      <div class="list">
        <div class="list-header">
          <div class="title">累计</div>
          <div class="unit">单位：万元</div>
        </div>
        <div class="chart" ref="chart2"></div>
      </div>
    </div>
  </poputLayout>
</template>

<script>
import poputLayout from "../../popup-layout";
import request from "@/utils/request";
import Qs from "qs";
import echarts from "echarts";
export default {
  components: {
    poputLayout,
  },
  data() {
    return {
      form: {},
    };
  },
  mounted() {},
  methods: {
    search(val) {
      this.form = val;
      this.getData1();
      this.getData2();
    },
    getData1() {
      request({
        url: "/system/screen/monthProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.form.deptId,
          year: this.form.year,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}月`);
          y.push((Number(res.data[i]) / 10000).toFixed(2) || 0);
        }
        this.init1(x, y);
      });
    },
    getData2() {
      request({
        url: "/system/screen/yearProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.form.deptId,
          year: this.form.year,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}`);
          y.push((Number(res.data[i]) / 10000).toFixed(2) || 0);
        }
        this.init2(x, y);
      });
    },
    init1(x,y) {
      const myChart = echarts.init(this.$refs.chart1);
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}利润:${params[0].value}万元`;
            return `${time}</br>${tip1}`;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "利润",
            data: y,
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 155, 55, 1)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 155, 55, .6)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 0, 0, 1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      myChart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            myChart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },

    init2(x,y) {
      const myChart = echarts.init(this.$refs.chart2);
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}月`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}利润:${params[0].value}万元`;
            return `${time}</br>${tip1}`;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "利润",
            data: y,
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 155, 55, 1)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 155, 55, .6)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 0, 0, 1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      myChart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            myChart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.body-conatiner {
  width: vw(1136);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  padding-top: vw(20);

  .list {
    width: vw(494);
    height: vh(289);
    background: #002463;
    border-radius: vw(4);
    margin: vh(20) 0;

    .list-header {
      width: 100%;
      height: vw(58);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 vw(24);

      .title {
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: bold;
        color: #8fc7ff;
      }

      .unit {
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: #8fc7ff;
        opacity: 0.4;
      }
    }

    .chart {
      width: 100%;
      height: calc(100% - #{vw(58)});
      padding: vw(10) vw(20);
    }
  }
}
</style>